<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
<head>

	<title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title>
	<meta name="assert" content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8">
	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
	<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">

	<style type="text/css">

		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }

			/* the first test box has its vertical dimension is set to some vh units */
		#testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; }

			/* the second test box, with fixed height */
		#testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; }

			/* third box, changed by using CSS transition */
		#testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left;
			-webkit-transition-property:       width, height;
			-webkit-transition-duration:       1.5s;
			-webkit-transition-delay:          0;
		}

			/* the reference box, growing in both directions (height by js, width by vh unit */
		#referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; }

		p { clear: both; margin: 10px 0; }

	</style>

</head>
<body>

<p>
	All boxes should end up the same size. The green box is the reference one.
</p>

<div id="testBoxWithVhOnly"></div>
<div id="testBoxNotGrownHorizontallyByJS"></div>
<div id="testBoxWithTransition"></div>
<div id="referenceBoxGrownHorizontallyByJS"></div>

<script type="text/javascript">
	
	// In case this file was opened by mistake, redirects to proper test
	if (window.top.location.href  === document.location.href) {

		window.top.location.href = "vh_not_refreshing_on_chrome.html";

	}

	function setDimension(id, dimension, value) {

		var element = document.getElementById(id);

		element.style[dimension] = value + "px";

	}

	function animate() {

		var viewportHeight = document.documentElement.clientHeight;

		var sizeH = 20;

		var referenceDimension = Math.round(sizeH * viewportHeight / 100);

		setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);

		setTimeout(animate, 20);
	}

	setTimeout(animate, 20);

	var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
	transitionedTestBoxStyle.height = "60px";
</script>

</body>
</html>
